<template>
  <div class="search">
    <van-sticky>
      <van-nav-bar title="搜索图书" left-arrow @click-left="goBack" />
      <van-search
        v-model="searchText"
        placeholder="请输入图书名称或作者"
        @search="onSearch"
        show-action
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    
    <div class="search-filters">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="categoryFilter"
          :options="categoryOptions"
        />
        <van-dropdown-item
          v-model="sortFilter"
          :options="sortOptions"
        />
      </van-dropdown-menu>
    </div>
    
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="book in searchResults"
        :key="book.id"
        :title="book.title"
        :desc="book.author"
        :thumb="book.coverUrl || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
        @click="goToBookDetail(book.id)"
      >
        <template #tags>
          <van-tag plain type="primary">{{ book.category }}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click.stop="addToLibrary(book)">加入书库</van-button>
        </template>
      </van-card>
      
      <van-empty
        v-if="searchResults.length === 0 && !loading"
        description="暂无搜索结果"
      />
    </van-list>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'Search',
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const loading = ref(false)
    const finished = ref(false)
    const activeTab = ref(1)
    const categoryFilter = ref(0)
    const sortFilter = ref(0)
    
    const categoryOptions = [
      { text: '全部分类', value: 0 },
      { text: '技术', value: 1 },
      { text: '文学', value: 2 },
      { text: '历史', value: 3 },
      { text: '哲学', value: 4 }
    ]
    
    const sortOptions = [
      { text: '默认排序', value: 0 },
      { text: '按书名', value: 1 },
      { text: '按作者', value: 2 },
      { text: '按出版日期', value: 3 }
    ]
    
    // 模拟搜索结果
    const searchResults = ref([
      { id: 1, title: 'Vue.js设计与实现', author: '霍春阳', category: '技术', coverUrl: '' },
      { id: 2, title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', category: '技术', coverUrl: '' },
      { id: 3, title: '重构：改善既有代码的设计', author: 'Martin Fowler', category: '技术', coverUrl: '' }
    ])
    
    const goBack = () => {
      router.go(-1)
    }
    
    const goHome = () => {
      router.push('/')
    }
    
    const goToSearch = () => {
      // 当前页面就是搜索页面
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const goToBookDetail = (id) => {
      router.push(`/book/${id}`)
    }
    
    const onSearch = () => {
      if (searchText.value) {
        // 模拟搜索
        loading.value = true
        
        setTimeout(() => {
          loading.value = false
          Toast.success('搜索完成')
        }, 1000)
      } else {
        Toast.fail('请输入搜索关键词')
      }
    }
    
    const onLoad = () => {
      // 模拟加载更多数据
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }
    
    const addToLibrary = (book) => {
      Toast.success(`《${book.title}》已加入书库`)
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      searchText,
      loading,
      finished,
      activeTab,
      categoryFilter,
      sortFilter,
      categoryOptions,
      sortOptions,
      searchResults,
      goBack,
      goHome,
      goToSearch,
      goToAddBook,
      goToProfile,
      goToBookDetail,
      onSearch,
      onLoad,
      addToLibrary,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.search-filters {
  background-color: #fff;
}
</style>